<extend name='Public/demo' />

<block name='contents'>
	<style>
	.thumbnail{
		overflow: hidden;
		box-shadow:0px 0px 30px #aaa;

	}
	.thumbnail .photo{
		width: 325px;
		height: 217px;
		overflow: hidden;
		background-size: cover;
		transition: all ease 1s;
	}
	.photo:hover{
		transform:scale(1.1);
		box-shadow:0px 0px 30px #888;
	}

</style>
<script src="__PUBLIC__/Admin/Photo/jquery.lighter.js"></script>
<script src="__PUBLIC__/Admin/Photo/easing.js"></script>
<link rel="stylesheet" href="__PUBLIC__/Admin/Photo/jquery.lighter.css">
	<div class="row" >
		<aside class="profile-nav col-lg-12" >
			<h3 style="text-align:center">照片管理</h3>
			<div class="row" id="out_div">
				<!-- <ul class="col-md-4">
					<div  style="margin-top:20px;" class="pdiv" >
						<div class="thumbnail" >
							<a href="__PUBLIC__/Uploads/photo/2016-05-20/573ea2cff0537.png" data-lighter>
								<div class="photo" style="background-image:url('__PUBLIC__/Uploads/photo/2016-05-20/3aa3744cf515f5c0b7fd8b21c4c6edaf.jpg');"></div>
							</a>
							<div class="caption">
								<p>
									<a href="#" class="btn btn-xs btn-info" role="button"><span class="icon-zoom-in"></span> 查看</a>
									<a href="#" class="btn btn-xs btn-danger" role="button"><span class="icon-remove-sign"></span> 删除</a>
								</p>
							</div>
						</div>
					</div>
				</ul> -->
			</div>
			<div style="text-align:center" class="m">
				<div class="row" style="text-align:center;cursor:pointer;display:none" id="more">查看更多</div>
				<div class="row" style="text-align:center;cursor:pointer;display:none" id="nomore">没有更多</div>
			</div>
		</aside>
	</div>
	<script>
		$(function(){
			
			// 初始化控制加载页数
			var p = 0;
			// 初始化统计删除条目个数
			// var s = 0;
			// 定义发送ajax状态, false为没有正在发送
			var isLoading = false;

			requestNews();

			/**
			 * [requestNews 发送ajax请求后台news数据]
			 *  后台如果有返回数据将插入图片
			 */
			function requestNews(){

				// 查看更多信息的一个阀值判断
				if (p>=8) {
					isLoading = true;
					$('#more').css({"display":'inline-block'})
					return false;
				};

				isLoading = true;
				$.post('ajaxphoto', {},function(data){
					if (data) {
						for (var i = 0; i < data.length; i++) {

							var odiv = $('<ul class="col-md-4"><div  style="margin-top:20px;" class="pdiv" ><div class="thumbnail" ><a href="__PUBLIC__/'+data[i]['photos_path']+'" data-lighter><div class="photo" style="background-image:url('+'__PUBLIC__'+data[i]['photos_path']+');"></div></a><div class="caption"><p><button class="btn btn-xs btn-info find" role="button"><span class="icon-zoom-in"></span> 查看</button> <button class="btn btn-xs btn-danger delimg" role="button" pid="'+data[i]['photos_id']+'"><span class="icon-remove-sign"></span> 删除</button></p></div></div></div></ul>')
							$('#out_div').append(odiv);
							odiv.show(500,'easeInBounce');
						};

						// 成功发送ajax自增, 控制发送ajax次数
						p++;
						isLoading = false;
					}else{
						if (p ==0) {

							$('#more').css('display','none');
							$('.m').append('<div style="font-size:50px">暂无数据</div>');
						}else{

							$('#nomore').css('display','inline-block');
						}
						isLoading = true;
					};
				},'json')
			}

			// 点击加载更多按钮, 发送ajax
			$('#more').on('click', function(){
				$(this).css({"display":'none'});
				p = 0;
				isLoading = false;
				requestNews();
			})

			// 页面滚动发送ajax
			$(window).scroll(function(){
				if (isLoading) {return;};
				var sH = $(document).height();
				var sT = $(window).scrollTop();
				var cH = $(window).height();
				if (sH<=sT+cH+20) {
					requestNews();
				};
			})

			// 点击加载更多按钮, 发送ajax
			$('.delimg').live('click', function(){
				var delimg = $(this);
				var photos_id = $(this).attr('pid');
				$.post('delphoto', {photos_id:photos_id},function(data){
					if (data == '1') {
						delimg.parents('ul').fadeOut(500,'easeOutBounce',function(){
							$(this).remove();
						});
						// delimg.parents('ul').remove();
						var sT = $(window).scrollTop();
						var cH = $(window).height();
						var sH = $('#out_div').height();
						if (sH<=sT+cH+20) {
							requestNews();
						};

					}else{
						alert('删除失败');
					}
				})

			})

			// 点击查看按钮
			$('.find').live('click', function(){
				$(this).parents('.thumbnail').find('a:first-child').trigger('click');
			});
		});
	</script>
</block>
